<template>
	<div class="mt15">
		 <el-row :gutter="20">
		    <el-col :span="3">
				<div class="pl30 mt15">
					<div class="main-color fs16 mb20 fb">
						商品分类
					</div>
					<div class="mt15">
						<el-tree :data="data" node-key="id" default-expand-all :expand-on-click-node="false"
							@node-click="handleNodeClick">
							<template #default="{ node, data }">
								<div class="custom-tree-node flex col-center row-between">
									<span>{{ node.label }}</span>
									<!-- <span>
										<el-button type="text" size="mini" @click.stop="() => append(node,data)">
											新增
										</el-button>
										<el-button v-if="node.data.id != -1" type="text" size="mini" @click.stop="() => edit(node,data)">
											编辑
										</el-button>
										<el-button v-if="node.data.id != -1" type="text" size="mini" @click.stop="() => remove(node, data)">
											删除
										</el-button>
									</span> -->
								</div>
							</template>
						</el-tree>
					</div>
				</div>
			</el-col>
		    <el-col :span="21">
				<div class="flex col-center row-between plr30 pb10">
					<div>
						已选择<span class="main-color">0</span>个产品
					</div>
					<el-form class="flex col-top row-between" :model="queryParams" ref="queryRef" :inline="true">
						<el-form-item label="商品名称/编号" prop="keyword" style="margin-bottom: 0;">
							<el-input
							v-model="queryParams.keyword"
							placeholder="请输入"
							clearable
							class="resetInput"
							style="width: 200px"
							:suffix-icon="Search"
							@keyup.enter="handleQuery"
							/>
						</el-form-item>
						<el-button class="mt5" type="defaultBtn" @click="handleQuery">搜索</el-button>
						<el-button class="mt5" @click="resetQuery">重置</el-button>
					</el-form>		
				</div>
				<el-table
				   v-loading="loading"
				   :data="list"
				   style="width: 100%;"
					 :header-row-style="{background:'#FAFAFA',color:'#0C1019',height:'54px'}"
					 :cell-style="{height:'54px'}"
					 @selection-change="handleSelectionChange"
				>
				  <el-table-column type="selection" width="55" align="center" :selectable="isSelect"/>
				   <el-table-column label="商品名称" align="center">
				      <template #default="scope">
				         <span class="main-color" >{{scope.row.commodityName}}</span>
				      </template>
				   </el-table-column>
				   <el-table-column label="商品编号" align="center" prop="commodityNumber" :show-overflow-tooltip="true" />
				   <el-table-column label="标准单价" align="center" prop="caseUnitPrice" :show-overflow-tooltip="true" />
				   <el-table-column label="产品规格" align="center" prop="specificationId" :show-overflow-tooltip="true">
					   <template v-slot="scope">
					   		<dict-tag :options="bus_product_specification_unit" :value="scope.row.specificationId" />
					   	</template>
				   </el-table-column>
				   <el-table-column label="启用状态" align="center" prop="status">
				   	<template v-slot="scope">
				   		<el-switch disabled v-model="scope.row.status" class="ml-2" inline-prompt active-text="启用"
				   			inactive-text="禁用" :loading="loading" />
				   	</template>
				   </el-table-column>
				   <el-table-column label="备注信息" align="center" prop="remark" :show-overflow-tooltip="true" />
				</el-table>
				<pagination v-show="total > 0" :total="total" v-model:page="queryParams.pageNum" v-model:limit="queryParams.pageSize" />
			</el-col>
		  </el-row>
	</div>
</template>

<script>
	import {resetForm,getUserInfo} from '@/utils/ruoyi'
	import {
		listClassify1, //商品分类树
		listGoods,//列表
	} from "@/api/business/product";
	export default{
		props:{
			activeName:{
				type:String,
				default:'1001'
			}
		},
		data(){
			return{
				bus_product_specification_unit:this.useDict('bus_product_specification_unit').bus_product_specification_unit,
				data: [],
				total:'',
				queryParams:{
					pageNum:'',
					pageSize:'',
					keyword:'',
					commodityType:this.activeName,//产品类型
					node:''
				},
				list:[],
				loading:true
			}
		},
		watch:{
			activeName(val){
				this.queryParams.commodityType = val
				this.getList()
			}
		},
		created() {
			this.getTree(1)
		},
		methods:{
			isSelect(row, index) {
			  if (row.status == true ) {
				return true;
			  } 
			},
			handleNodeClick(e) {
				if(e.id*1 != -1){
					this.queryParams.classifyId = e.id	
				}else{
					this.queryParams.classifyId = ''
				}				
				this.getList();
			},
			// 搜索
			handleQuery(){
				this.getList()
			},
			// 重置按钮操作
			resetQuery() {
			  this.resetForm("queryRef");
			  // this.handleQuery();
			},
			// 多选框选中数据
			handleSelectionChange(selection) {
			  this.ids = selection.map(item => item.id);
			  if(this.ids.length > 0){
					this.$emit('getValue',this.ids)  
			  }else{
				  localStorage.removeItem('giftIds')
			  }
			  // single.value = selection.length != 1;
			  // multiple.value = !selection.length;
			},
			// 请求列表数据
			getList(){
				this.loading = true;
				listGoods(this.queryParams).then(response => {
				  this.list = response.rows;
				  for(let key in this.list){
				  	this.list[key].status = this.list[key].status == '0' ? true : false
				  }
				  this.total = response.total;
				  this.loading = false;
				});
			},
			//分类树
			getTree(num) {
				listClassify1().then(res => {
					if (res.code == 200) {
						let arr = [{
							ancestors:'',
							id:'-1',
							name:'全部',
							parentId:''
						}]
						let dataArr = arr.concat(res.data)
						for (let key in dataArr) {
							dataArr[key].label = dataArr[key].name
						}
						this.data = this.handleTree(dataArr)
						console.log(dataArr,'this.data1')
						console.log(this.data,'this.data')
						if(num == 1){
							this.getList()
						}
					}
				})
			},
		}
	}
</script>

<style>
</style>